import React, { useState, useReducer, useEffect } from 'react'
import Header from '../../components/Header'
import { reqAddList, reqShopDel, reqShopedit } from '../../http/api'
import './Shop.less'
import have from '../../assets/img/have.jpeg'
import no from '../../assets/img/no.jpeg'
// 引入仓库
import { reducer, initState } from '../Login/user'
import { Toast } from 'antd-mobile'
// 引入过滤器
import { filterPrice } from '../../filters/index'
export default function Shop() {
    // 1.1初始化数据
    const [shopList, setShopList] = useState([])
    const [state, dispatch] = useReducer(reducer, initState)
    // 2.初始化全选
    const [allChecked, setAllChecked] = useState(false)
    /* 由于请求是异步的，所以num是可以自减少到0甚至-1，所以需要使用 **节流** 解决。
    首先先定义一个变量isRequest ,默认是true  */
    let isRequest = true
    // 1.2 一进页面就发请求
    useEffect(() => {
        //  调用
        reqList()
    }, [])
    //1.3 封装一个函数
    const reqList = () => {
        reqAddList({
            uid: state.info.uid
        }).then(res => {
            let arr = res.data.list[1].content ? res.data.list[1].content : []
            // 1.4 由于又全选和反选，所以要补checked
            arr.forEach(item => {
                // 7. 由于每次修改后，请求列表将checked都变为false,但是我们希望checked是修改之前的状态。
                let obj = shopList.find((i) => i.id == item.id)

                item.checked = obj ? obj.checked : false;//默认为false
            })
            //1.5 修改赋值
            setShopList(arr)
            // 6.5 打开开关
            isRequest = true
        })
    }
    //3.点击了选中其中的一个按钮
    const changeOne = (index) => {
        //3.1 点击下标一致的与她的反向选择
        shopList[index].checked = !shopList[index].checked
        //3.2 修改shopList---要用拷贝，否则页面会不渲染
        setShopList([...shopList])
        //3.3 修改全选==== 每一个都选中的时候，全选就选中，有一个不选中，全选就不选中
        setAllChecked(shopList.every(item => item.checked))
    }
    // 4.点击了全选
    const all = () => {
        // 4.4 由于allChecked 每次拿到的值都是新的值，所以将他提前拿出来
        // 新的值就是全选的相反面
        let newArr = !allChecked

        // 4.1 修改了全选--相反值----4.4 s所以这里要放新的值
        setAllChecked(newArr)
        // 4.2 全选选中，其他的单选也都选中---修改list
        // 单选的状态就是全选的状态----4.5 也是新值
        shopList.forEach(item => item.checked = newArr)
        // 4.3 修改shopList
        setShopList([...shopList])
    }
    // 5点击了+
    const add = async (id) => {
        // 5.1 发请求
        let res = await reqShopedit({
            id: id,
            type: 2
        })
        if (res.data.code === 200) {
            // 5.2 重新渲染列表
            reqList()
        }
    }
    // 6.点击-
    const sub = async (id, num) => {
        // 6.2.2 判断临界值后，发现连着点击还会新出现问题，所以要用到节流
        if (num <= 1) {
            Toast.info('宝贝不能在减少了');
            return;
        }
        //    6.3 判断临界值
        // 发请求前先判断isRequest是true还是false，true就发请求，一发立刻变为false.
        if (isRequest) {
            // 6.4 开关关掉
            isRequest = false
            // 6.1 发请求
            let res2 = await reqShopedit({
                id: id,
                type: 1
            })
            if (res2.data.code === 200)
                // 6.2 重新刷新列表
                reqList()
        }
    }
    //8. 点击了删除
    const del = async (id) => {
        // 8.1 发请求
        let res3 = await reqShopDel({id})
        if(res3.data.code === 200){
            // 8.2 弹成功
            Toast.success(res3.data.msg)
            // 8.3 重新刷新列表
            reqList()
        }
    }
    // 7.直接计算总价
    let allPrice = shopList.reduce((val, item) => item.checked ? val += item.price * item.num : val, 0)
    return (
        <div className="shop">
            {/* 头部组件 */}
            <Header title="购物车" back></Header>
            {/* 子导航 */}
            <div className="shop_nav">
                <ul>
                    <li>销量</li>
                    <li>特价</li>
                    <li>降价</li>
                </ul>
            </div>
            <div className="all_price">
                <div className="allchecked" onClick={() => all()}>
                    全选{
                        allChecked ? <img src={have}></img> : <img src={no} alt="" />
                    }
                </div>
                <div className="price">
                    总价：{filterPrice(allPrice)}
                </div>
            </div>
            {/*1.6 列表展示 */}
            <div className="shoplist">
                <ul>
                    {
                        shopList.map((item, index) => {
                            return (
                                <li key={item.id}>
                                    <div className="left">
                                        <div className="xuanze_img" onClick={() => changeOne(index)}>
                                            {
                                                item.checked ? <img src={have}></img> : <img src={no} alt="" />
                                            }
                                        </div>
                                        <img src={item.img} alt="" />
                                    </div>
                                    <div className="right">
                                        <p>{item.goodsname}</p>
                                        <div>数量：{item.num}</div>
                                        <button onClick={() => sub(item.id, item.num)}>-</button>
                                        <span>{item.num}</span>
                                        <button onClick={() => add(item.id)}>+</button>
                                        <button className="del" onClick={() => del(item.id)}>删除</button>
                                    </div>
                                </li>
                            )
                        })
                    }

                </ul>

            </div>

        </div>
    )
}
